<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <div v-if="loginType == 'phone'">
        <label for="">手机</label>
        <input type="text" placeholder="手机">
      </div>
      <div v-else="loginType == 'email'">
        <label for="">邮箱</label>
        <input type="text" placeholder="邮箱">
      </div>
      <hr>

      <div v-show="loginType == 'phone'">
        <label for="">手机</label>
        <input type="text" placeholder="手机">
      </div>
      <div v-show="loginType == 'email'">
        <label for="">邮箱</label>
        <input type="text" placeholder="邮箱">
      </div>
      <button @click="change">change</button>
    </div>
    1、v-if有更高的切换开销，v-show有更高的初始渲染开销。如果需要频繁的切换，使用v-show比较好，如果运行条件很少改变，使用v-if比较好。

    2、v-show比v-if性能更高，因为v-show只能动态的改变样式，不需要增删DOM元素。所以当程序不是很大时候，v-if和v-show区别都不大，如果项目很大，推荐多用v-show，较少浏览器后期操作的性能。
    
    3、需要多种条件场景，比如id=1，=2，=3.....时候，因为只有v-if，可以和v-else等连用，这种比较适合用v-if
    
    4、v-show不支持<template>语法
    
    5、v-if切换时候回实时的销毁和重建内部的事件、钩子函数等，v-show只会初始化渲染时候执行，再切换时候不会执行生命后期的过程。
    <script src="../js/vue.js"></script>

    <script>
      const app = Vue.createApp({
        data() {
          return {
            loginType: "phone"
          }
        },
        methods:{
          change(){
            this.loginType == 'phone' ? this.loginType = 'email' : this.loginType = 'phone';
          }
        }
      }).mount("#app");
    </script>
  </body>
</html>